<template>
  <section class="planet">
    <div id="scene">
      <div data-depth="0.1" class="bg">
        <img src="@/assets/img/planet/background.png" alt=""/>
      </div>
      <div data-depth="0.2" class="rock1">
        <img src="@/assets/img/planet/rock.png" alt=""/>
      </div>
      <div data-depth="0.6" class="earth">
        <img src="@/assets/img/planet/earth.png" alt=""/>
      </div>
      <div data-depth="0.4" class="mid">
        <img src="@/assets/img/planet/mid.png" alt=""/>
      </div>
      <div data-depth="0.1" class="fore">
        <img src="@/assets/img/planet/foreground.png" alt=""/>
      </div>
    </div>
  </section>
</template>

<script>
import Parallax from 'parallax-js'
import {onMounted, ref} from 'vue';

export default {
  name: 'MyPlanet',
  setup() {
    const parallaxInstance = ref({})

    function intscence() {
      const scene = document.getElementById('scene');
      parallaxInstance.value = new Parallax(scene, {
        relativeInput: true
      });
    }

    onMounted(() => {
      intscence()
    })
  }
}
</script>

<style scoped lang="scss">
.planet {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
}

#scene {
  position: relative;
  border-radius: 20px;
  width: 100%;
  height: 100%;
}

.bg {
  left: -2.5rem !important;
  top: -0.5rem !important;
  width: 125%;
  height: auto;

  img {
    width: 100%;
    height: 100%;
    filter: brightness(0.6);
  }
}

.rock1 {
  position: absolute;
  left: 10% !important;
  top: 20% !important;

  img {
    width: 30%;
    filter: brightness(0.5);
  }
}

.earth {
  left: 45% !important;
  top: 30% !important;

  img {
    width: 100% !important;
    height: auto !important;
    max-width: unset !important;
    z-index: 1;
    filter: brightness(0.7);
  }
}

.mid {
  left: -90px !important;
  top: unset !important;
  @include max-screen(375px) {
    bottom: -25px !important;
  }
  @include min-screen(375px) {
    bottom: -30px !important;
  }
  @include min-screen(568px) {
    bottom: -40px !important;
  }
  @include min-screen(768px) {
    bottom: -50px !important;
  }
  @include min-screen(1024px) {
    bottom: -60px !important;
  }

  img {
    width: 100%;
    z-index: 2;
    left: -20px;
    top: 20% !important;
    filter: brightness(0.8);
  }

}

.fore {
  right: -100px !important;
  bottom: -140px !important;
  top: 0px !important;
  left: unset !important;

  img {
    width: 400px;
    height: 110%;
    z-index: 3;
    filter: brightness(0.5);
  }
}
</style>
